

import React, { useEffect, useState } from 'react';
// antd组件
import { Button, Layout, Menu, Popover, Popconfirm, message } from 'antd';
// antd图标
import { MenuFoldOutlined, MenuUnfoldOutlined, HomeFilled, LaptopOutlined, ScheduleOutlined, ReadOutlined, EditOutlined } from '@ant-design/icons';
// css样式
import indexCss from "../css/index.module.less"
import { useNavigate, useOutlet } from 'react-router-dom';
// layout组件
const { Header, Sider, Content } = Layout;
// menu数据
// 校长数据
const items1 = [
    {
        key: '/shouye',
        label: '首页',
        icon: <HomeFilled />,
    },
    {
        key: 'sub2',
        label: '教务管理',
        icon: <LaptopOutlined />,
        children: [
            {
                key: 'school',
                label: '基础信息维护',
            },
            {
                key: 'teacher',
                label: '教师管理',
            },
            {
                key: 'student',
                label: '学生管理',
            },
            {
                key: 'banji',
                label: '班级管理',
            },
        ],
    },
    {
        key: 'sub3',
        label: '走班排课',
        icon: <ScheduleOutlined />,
        disabled: true,
        children: [
            {
                key: '7',
                label: '选课设置',
            },
            {
                key: '8',
                label: '智能分班',
            },
            {
                key: '9',
                label: '走班排课',
            },
        ],
    },
    {
        key: 'sub4',
        label: '备课管理',
        icon: <ReadOutlined />,
        children: [
            {
                key: 'grbk',
                label: '备课组管理',
            },
            {
                key: 'bksl',
                label: '备课示例',
            },
        ],
    },
    {
        key: 'sub5',
        label: '作业管理',
        icon: <EditOutlined />,
        children: [
            {
                key: 'index1',
                label: '作业管理',
            },
            {
                key: 'index2',
                label: '作业统计',
            },
        ],
    },
];
// 年级主任数据
const items2 = [
    {
        key: '/shouye',
        label: '首页',
        icon: <HomeFilled />,
    },
    {
        key: 'sub2',
        label: '教务管理',
        icon: <LaptopOutlined />,
        children: [
            {
                key: 'school',
                label: '基础信息维护',
            },
            {
                key: 'teacher',
                label: '教师管理',
            },
            {
                key: 'student',
                label: '学生管理',
            },
            {
                key: 'banji',
                label: '班级管理',
            },
        ],
    },
    {
        key: 'sub4',
        label: '备课管理',
        icon: <ReadOutlined />,
        children: [
            {
                key: 'grbk',
                label: '备课组管理',
            },
            {
                key: 'bksl',
                label: '备课示例',
            },
        ],
    },
    {
        key: 'sub5',
        label: '作业管理',
        icon: <EditOutlined />,
        children: [
            {
                key: 'index1',
                label: '作业管理',
            },
            {
                key: 'index2',
                label: '作业统计',
            },
        ],
    },
];
// 班主任数据
const items3 = [
    {
        key: '/shouye',
        label: '首页',
        icon: <HomeFilled />,
    },
    {
        key: 'sub4',
        label: '备课管理',
        icon: <ReadOutlined />,
        children: [
            {
                key: 'grbk',
                label: '备课组管理',
            },
            {
                key: 'bksl',
                label: '备课示例',
            },
        ],
    },
    {
        key: 'sub5',
        label: '作业管理',
        icon: <EditOutlined />,
        children: [
            {
                key: 'index1',
                label: '作业管理',
            },
            {
                key: 'index2',
                label: '作业统计',
            },
        ],
    },
];
// 督察数据
const items4 = [
    {
        key: '/shouye',
        label: '首页',
        icon: <HomeFilled />,
    },
    {
        key: 'sub2',
        label: '教务管理',
        icon: <LaptopOutlined />,
        children: [
            {
                key: 'school',
                label: '基础信息维护',
            },
            {
                key: 'teacher',
                label: '教师管理',
            },
            {
                key: 'student',
                label: '学生管理',
            },
            {
                key: 'banji',
                label: '班级管理',
            },
        ],
    },
    {
        key: 'sub3',
        label: '走班排课',
        icon: <ScheduleOutlined />,
        disabled: true,
        children: [
            {
                key: '7',
                label: '选课设置',
            },
            {
                key: '8',
                label: '智能分班',
            },
            {
                key: '9',
                label: '走班排课',
            },
        ],
    },
];


export default function Index() {
    // state
    const [collapsed, setCollapsed] = useState(false) // 控制menu是否收起
    const nav = useNavigate() // 跳转路由
    const container = useOutlet() // 显示二级路由
    const [items, setItems] = useState([]) // menu值
    const [defaultSelectedKeys, setDefaultSelectedKeys] = useState(localStorage.getItem("defaultSelectedKeys") ? JSON.parse(localStorage.getItem("defaultSelectedKeys")) : "/school")
    const [defaultOpenKeys, setDefaultOpenKeys] = useState(localStorage.getItem("defaultOpenKeys") ? JSON.parse(localStorage.getItem("defaultOpenKeys")) : "/school")
    const headImg = (
        <Popconfirm
            description="确定退出登录吗?"
            onConfirm={() => nav("/login")}
            okText="是"
            cancelText="否"
        >
            <Button>退出登录</Button>
        </Popconfirm>
    )
    const imgsrc = localStorage.getItem("imgSrc") ? localStorage.getItem("imgSrc") : ""
    const admin = localStorage.getItem("admin")
    // func

    const onClick = (e) => { // 点击menu的时候可以将key设为路由进行跳转
        // console.log('click ', e.key);
        nav(`${e.key}`)
        localStorage.setItem("defaultSelectedKeys", JSON.stringify(e.key))
        if (e.key == "/shouye") {
            localStorage.setItem("defaultOpenKeys", JSON.stringify(e.key))
        } else if (e.key == "school" || e.key == "teacher" || e.key == "banji" || e.key == "student") {
            localStorage.setItem("defaultOpenKeys", JSON.stringify("sub2"))
        } else if (e.key == "index1" || e.key == "index2") {
            localStorage.setItem("defaultOpenKeys", JSON.stringify("sub5"))
        } else if (e.key == "bksl" || e.key == "grbk") {
            localStorage.setItem("defaultOpenKeys", JSON.stringify("sub4"))
        }
    };
    // 选择对应rid
    useEffect(() => {
        // localStorage.setItem("rid", JSON.stringify(1))
        let rid = JSON.parse(localStorage.getItem("rid"))
        if (rid === 1) {
            setItems(items1)
        } else if (rid === 2) {
            setItems(items2)
        } else if (rid === 3) {
            setItems(items3)
        } else if (rid === 4) {
            setItems(items4)
        }
    }, [])

    return <>
        <Layout className={indexCss.layoutStyle}>
            <Sider width="15%" className={indexCss.siderStyle} collapsed={collapsed}>
                <div className={indexCss.box}>
                    {collapsed ?
                        <span>美团教育</span> :
                        <img src='/images/1.jpg' alt=''></img>}
                </div>
                <Menu
                    onClick={onClick}
                    className={indexCss.menuStyle}
                    mode="inline"
                    items={items}
                    theme='dark'
                    defaultSelectedKeys={[defaultSelectedKeys]}
                    defaultOpenKeys={[defaultOpenKeys]}
                />
            </Sider>
            <Layout>
                <Header className={indexCss.headerStyle}>
                    <div>
                        <Button
                            type="text"
                            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            onClick={() => setCollapsed(!collapsed)}
                            style={{
                                fontSize: '16px',
                                width: 64,
                                height: 64,
                            }}
                        />
                        <span>学校管理系统</span>
                    </div>
                    <div style={{ display: "flex", alignItems: "center" }}>
                        <span>{admin}，欢迎你！</span>
                        <Popover content={headImg}>
                            <img src={imgsrc} alt="" style={{ width: "40px", height: "40px", borderRadius: "50%" }} />
                        </Popover>
                    </div>
                </Header>
                <Content className={indexCss.contentStyle}>
                    {container}
                </Content>
            </Layout>
        </Layout>
    </>
}


